<template>
	<view style="height: 100%;background-color: #fff;">
		<swiper :autoplay="autoplay" :interval="interval"
			:duration="duration" style="width: 100%;  margin: 0 auto;">
			<swiper-item v-for="(item,index) in rotationList">
				<view style="margin: 0 auto; text-align: center;">
					<image :src="item" mode="" style="width: 100%; "></image>
				</view>
			</swiper-item>
		</swiper>
		<view style="margin: 10px;">

			<view class="block-title" style="display: flex;padding: 10px 0;margin-bottom: 10px;">
				<view @click="selectLabel(item)" :class="{active: selected_label == item.text}"
					v-for="(item,index) in labels" style="flex: 1; margin-left: auto;">{{item.text}}</view>
			</view>
			<view v-for="(item,index) in data" style="border-bottom: 1px solid #eee;margin-top: 10px;">
				<view @click="juapp(item)" style="display: flex; background-color: #fff;padding-bottom: 5px;" >
					<!-- <view style="flex: 1;">
						<image src="../../static/050.png" style="width: 80px; height: 80px;"></image>
					</view> -->
					<view style="background-color: #FFFFFF; flex: 5;">
						<view style="">{{item.title}}</view>
						<view style="color: #999999; margin-top: 5px;">
							<view style="color: #999999;">{{item.location}} 经验{{item.experience}} {{item.education}}</view>
							<view style="color: #007AFF;margin-top: 15px;">{{item.salary}}</view>
						</view>
					</view>
					<view style="flex: 1;text-align: center;">
						<image @click="showadd()" src="../../static/030.png"
							style="width: 25px; height: 25px; border-radius: 20px;margin-top: 30px;"></image>
					</view>
				</view>
			</view>
			
		</view>

	</view>

</template>

<script>
	export default {
		name: 'Rotation',

		data() {
			return {
				labels: [{
						text: '全部职位',
						status: 0
					},
					// {
					// 	text: '最新工作',
					// 	status: 1
					// },
					// {
					// 	text: '热门职位',
					// 	status: 10
					// },
					// {
					// 	text: '高薪职位',
					// 	status: 20
					// },
				],
				selected_label: '全部职位',
				//指示点
				// indicatorDots: true,
				//是否自动轮播
				autoplay: true,
				// 切换的时间隔
				interval: 3000,
				//滑动动画市场
				duration: 500,
				rotationList: [
					"/static/banner3.png",
					// "/static/010.png",
					// "/static/010.png"
				],
				data: [],
			}
		},
		created() {

		},
		onShow() {
			let that = this;
			this.$api.getJob({}).then(res => {
				that.data = res.data;
			
			})
		},
		methods: {
			selectLabel(item) {
				this.selected_label = item.text

			},
			juapp(item) {
				uni.setStorageSync('tmp_job_info', JSON.stringify(item));
				uni.navigateTo({
					url: '/pages/index/jobdetail'
				})
			},
			showadd() {
				uni.showModal({
					title: '客服热线电话',
					content: '18823555231',
					success: function(res) {
						console.log('立即拨号')
					}
				})
			},
		}

	}
</script>

<style >
	.active {
		font-weight: bold;
		color: #007AFF;
	}
	
	uni-swiper .uni-swiper-wrapper {
		border-radius: 0;
	}
	
</style>
